<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popover 弹出框 - ng-components-ui</title>
    <link rel="stylesheet" href="../dist/ng-components.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #f5f5f5;
      }

      .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .header h1 {
        margin: 0 0 10px 0;
        font-size: 32px;
      }

      .header p {
        margin: 0;
        opacity: 0.9;
        font-size: 16px;
      }

      .back-link {
        display: inline-block;
        margin-top: 15px;
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        transition: background 0.2s;
      }

      .back-link:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px;
      }

      .demo-section {
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 30px;
      }

      .demo-section h2 {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 20px;
        border-bottom: 2px solid #667eea;
        padding-bottom: 10px;
      }

      .demo-section h3 {
        margin: 20px 0 15px 0;
        color: #555;
        font-size: 16px;
        font-weight: 600;
      }

      .demo-section p {
        color: #666;
        line-height: 1.6;
        margin: 0 0 15px 0;
      }

      .demo-actions {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin: 20px 0;
        align-items: center;
        justify-content: center;
        min-height: 200px;
      }

      .demo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
        margin: 30px 0;
        text-align: center;
      }

      .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      .btn:active {
        transform: translateY(0);
      }

      .btn-primary {
        background: #667eea;
        color: white;
      }

      .btn-primary:hover {
        background: #5568d3;
      }

      .btn-success {
        background: #48bb78;
        color: white;
      }

      .btn-success:hover {
        background: #38a169;
      }

      .btn-warning {
        background: #ed8936;
        color: white;
      }

      .btn-warning:hover {
        background: #dd6b20;
      }

      .btn-danger {
        background: #f56565;
        color: white;
      }

      .btn-danger:hover {
        background: #e53e3e;
      }

      .btn-info {
        background: #4299e1;
        color: white;
      }

      .btn-info:hover {
        background: #3182ce;
      }

      .btn-secondary {
        background: #edf2f7;
        color: #2d3748;
      }

      .btn-secondary:hover {
        background: #e2e8f0;
      }

      .code-block {
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 12px;
        overflow-x: auto;
      }

      .code-block code {
        color: #2d3748;
      }

      .feature-list {
        background: #f7fafc;
        border-left: 4px solid #667eea;
        padding: 15px 20px;
        margin: 20px 0;
      }

      .feature-list ul {
        margin: 0;
        padding-left: 20px;
      }

      .feature-list li {
        color: #4a5568;
        margin: 8px 0;
        line-height: 1.6;
      }

      .popover-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 240px;
      }

      .popover-form label {
        font-size: 12px;
        color: #4a5568;
        font-weight: 600;
      }

      .popover-form input,
      .popover-form select,
      .popover-form textarea {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        font-size: 13px;
        background: #fff;
      }

      .popover-form textarea {
        resize: vertical;
        min-height: 60px;
      }

      .popover-form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 5px;
      }

      .placement-demo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 100px;
        min-height: 300px;
        padding: 50px;
      }
    </style>
  </head>
  <body ng-controller="DemoController">
    <div class="header">
      <h1>Popover 弹出框组件</h1>
      <p>轻量级弹出框，支持复杂内容和多种位置</p>
      <a href="home.html" class="back-link">← 返回主页</a>
    </div>

    <div class="container">
      <div class="demo-section">
        <h2>Popover 组件</h2>

        <div class="feature-list">
          <strong>功能特性:</strong>
          <ul>
            <li>支持复杂内容（表单、列表、自定义HTML）</li>
            <li>多种触发方式（点击、悬停、手动）</li>
            <li>四个方向位置（top、bottom、left、right）</li>
            <li>支持标题和内容分离</li>
            <li>轻量级设计，带箭头指示</li>
            <li>自动定位和边界检测</li>
          </ul>
        </div>

        <h3>1. 基本用法</h3>
        <p>使用 <code>ng-popover</code> 指令，通过 data-* 属性配置</p>
        <div class="demo-actions">
          <button
            class="btn btn-primary"
            ng-popover
            popover-title="提示"
            popover-content="这是一个简单的 Popover 提示内容"
            popover-placement="top"
            popover-trigger="click"
          >
            点击显示 Popover
          </button>
        </div>

        <div class="code-block">
          <code>
&lt;button<br>
&nbsp;&nbsp;ng-popover<br>
&nbsp;&nbsp;popover-title="提示"<br>
&nbsp;&nbsp;popover-content="这是一个简单的 Popover 提示内容"<br>
&nbsp;&nbsp;popover-placement="top"<br>
&nbsp;&nbsp;popover-trigger="click"&gt;<br>
&nbsp;&nbsp;点击显示 Popover<br>
&lt;/button&gt;
          </code>
        </div>

        <h3>2. 四个方向位置</h3>
        <p>通过 <code>popover-placement</code> 设置位置：top、bottom、left、right</p>
        <div class="placement-demo">
          <button
            class="btn btn-primary"
            ng-popover
            popover-title="顶部"
            popover-content="这是顶部位置的 Popover"
            popover-placement="top"
            popover-trigger="click"
          >
            Top
          </button>

          <button
            class="btn btn-success"
            ng-popover
            popover-title="右侧"
            popover-content="这是右侧位置的 Popover"
            popover-placement="right"
            popover-trigger="click"
          >
            Right
          </button>

          <button
            class="btn btn-warning"
            ng-popover
            popover-title="底部"
            popover-content="这是底部位置的 Popover"
            popover-placement="bottom"
            popover-trigger="click"
          >
            Bottom
          </button>

          <button
            class="btn btn-danger"
            ng-popover
            popover-title="左侧"
            popover-content="这是左侧位置的 Popover"
            popover-placement="left"
            popover-trigger="click"
          >
            Left
          </button>
        </div>

        <h3>3. 触发方式</h3>
        <p>支持 click（点击）、hover（悬停）、manual（手动）</p>
        <div class="demo-actions">
          <button
            class="btn btn-primary"
            ng-popover
            popover-title="点击触发"
            popover-content="点击按钮显示/隐藏 Popover"
            popover-placement="top"
            popover-trigger="click"
          >
            Click 触发
          </button>

          <button
            class="btn btn-info"
            ng-popover
            popover-title="悬停触发"
            popover-content="鼠标悬停时显示 Popover"
            popover-placement="top"
            popover-trigger="hover"
          >
            Hover 触发
          </button>

          <button
            class="btn btn-success"
            ng-popover
            popover-title="手动控制"
            popover-content="通过代码控制显示/隐藏"
            popover-placement="top"
            popover-trigger="manual"
            popover-show="manualPopoverShow"
          >
            Manual 触发
          </button>
          <button class="btn btn-warning" ng-click="toggleManualPopover()">
            切换手动 Popover
          </button>
        </div>

        <div class="code-block">
          <code>
&lt;!-- Click 触发 --&gt;<br>
&lt;button ng-popover popover-trigger="click"&gt;Click&lt;/button&gt;<br>
<br>
&lt;!-- Hover 触发 --&gt;<br>
&lt;button ng-popover popover-trigger="hover"&gt;Hover&lt;/button&gt;<br>
<br>
&lt;!-- Manual 手动控制 --&gt;<br>
&lt;button ng-popover popover-trigger="manual" popover-show="manualPopoverShow"&gt;Manual&lt;/button&gt;<br>
&lt;button ng-click="manualPopoverShow = !manualPopoverShow"&gt;切换&lt;/button&gt;
          </code>
        </div>

        <h3>4. HTML 内容</h3>
        <p>支持 HTML 格式的内容（需要设置 popover-html="true"）</p>
        <div class="demo-actions">
          <button
            class="btn btn-primary"
            ng-popover
            popover-title="富文本内容"
            popover-content="<p>支持 <strong>HTML</strong> 格式</p><ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li></ul>"
            popover-html="true"
            popover-placement="right"
            popover-trigger="click"
          >
            查看 HTML 内容
          </button>
        </div>

        <div class="code-block">
          <code>
&lt;button<br>
&nbsp;&nbsp;ng-popover<br>
&nbsp;&nbsp;popover-title="富文本内容"<br>
&nbsp;&nbsp;popover-content="&lt;p&gt;支持 &lt;strong&gt;HTML&lt;/strong&gt; 格式&lt;/p&gt;"<br>
&nbsp;&nbsp;popover-html="true"<br>
&nbsp;&nbsp;popover-placement="right"&gt;<br>
&nbsp;&nbsp;查看 HTML 内容<br>
&lt;/button&gt;
          </code>
        </div>

        <h3>5. 配置对象用法</h3>
        <p>使用 ng-popover 绑定配置对象</p>
        <div class="demo-actions">
          <button class="btn btn-info" ng-popover="popoverConfig">
            配置对象方式
          </button>
        </div>

        <div class="code-block">
          <code>
// Controller<br>
$scope.popoverConfig = {<br>
&nbsp;&nbsp;title: '配置对象',<br>
&nbsp;&nbsp;content: '通过对象配置 Popover 属性',<br>
&nbsp;&nbsp;placement: 'bottom',<br>
&nbsp;&nbsp;trigger: 'click'<br>
};<br>
<br>
// HTML<br>
&lt;button ng-popover="popoverConfig"&gt;配置对象方式&lt;/button&gt;
          </code>
        </div>

        <h3>6. 实际应用场景</h3>
        <div class="demo-actions">
          <button
            class="btn btn-success"
            ng-popover
            popover-title="用户信息"
            popover-content="<div style='padding: 10px;'><p><strong>张三</strong></p><p>邮箱: zhangsan@example.com</p><p>部门: 技术部</p></div>"
            popover-html="true"
            popover-placement="right"
            popover-trigger="click"
          >
            查看用户信息
          </button>

          <button
            class="btn btn-warning"
            ng-popover
            popover-title="操作提示"
            popover-content="<div style='padding: 5px;'><p>确定要删除这个项目吗？</p><p style='color: #f56565;'>此操作不可恢复</p></div>"
            popover-html="true"
            popover-placement="top"
            popover-trigger="click"
          >
            删除项目
          </button>

          <button
            class="btn btn-info"
            ng-popover
            popover-title="帮助信息"
            popover-content="<div style='max-width: 250px;'><p>这个功能用于...</p><ul style='margin: 0; padding-left: 20px;'><li>功能点 1</li><li>功能点 2</li><li>功能点 3</li></ul></div>"
            popover-html="true"
            popover-placement="bottom"
            popover-trigger="hover"
          >
            帮助说明
          </button>
        </div>

        <h3>7. 表单交互示例</h3>
        <p>
          如果需要在 Popover 中呈现多个表单项，可以让
          <code>content</code> 返回一段 HTML，并配合
          <code>html: true</code> 来保留输入框与操作按钮。
        </p>
        <div class="demo-actions">
          <button class="btn btn-primary" ng-popover="formPopoverConfig">
            打开表单 Popover
          </button>
        </div>

        <div class="code-block">
          <code>
// Controller<br>
$scope.formPopoverConfig = {<br>
&nbsp;&nbsp;title: '快速创建成员',<br>
&nbsp;&nbsp;html: true,<br>
&nbsp;&nbsp;placement: 'right',<br>
&nbsp;&nbsp;trigger: 'click',<br>
&nbsp;&nbsp;content: [<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;form class='popover-form'&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;label&gt;姓名&lt;/label&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;input type='text' placeholder='请输入姓名' /&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;label&gt;邮箱&lt;/label&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;input type='email' placeholder='name@example.com' /&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;label&gt;角色&lt;/label&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;select&gt;&lt;option&gt;管理员&lt;/option&gt;&lt;option&gt;协作者&lt;/option&gt;&lt;option&gt;访客&lt;/option&gt;&lt;/select&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;label&gt;备注&lt;/label&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;textarea placeholder='可填写备注信息'&gt;&lt;/textarea&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;div class='popover-form-actions'&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;button type='button' class='btn btn-secondary'&gt;取消&lt;/button&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;button type='button' class='btn btn-primary'&gt;确认&lt;/button&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;/div&gt;",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"&lt;/form&gt;"<br>
&nbsp;&nbsp;].join('')<br>
};<br>
<br>
// HTML<br>
&lt;button class="btn btn-primary" ng-popover="formPopoverConfig"&gt;打开表单 Popover&lt;/button&gt;
          </code>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/angular-strap@2.3.12/dist/angular-strap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/angular-sanitize@1.8.3/angular-sanitize.min.js"></script>
    <script src="../dist/ng-components.js"></script>
    <script>
      angular
        .module("demoApp", ["ngComponents", "ngSanitize"])
        .controller("DemoController", function ($scope) {
          // 手动控制 Popover
          $scope.manualPopoverShow = false;

          $scope.toggleManualPopover = function () {
            $scope.manualPopoverShow = !$scope.manualPopoverShow;
          };

          // 配置对象
          $scope.popoverConfig = {
            title: "配置对象",
            content: "通过对象配置 Popover 的各种属性",
            placement: "bottom",
            trigger: "click"
          };

          // 表单内容示例
          $scope.formPopoverConfig = {
            title: "快速创建成员",
            html: true,
            placement: "right",
            trigger: "click",
            content: [
              "<form class='popover-form'>",
              "<label>姓名</label>",
              "<input type='text' placeholder='请输入姓名' />",
              "<label>邮箱</label>",
              "<input type='email' placeholder='name@example.com' />",
              "<label>角色</label>",
              "<select>",
              "<option>管理员</option>",
              "<option>协作者</option>",
              "<option>访客</option>",
              "</select>",
              "<label>备注</label>",
              "<textarea placeholder='可填写备注信息'></textarea>",
              "<div class='popover-form-actions'>",
              "<button type='button' class='btn btn-secondary'>取消</button>",
              "<button type='button' class='btn btn-primary'>确认</button>",
              "</div>",
              "</form>"
            ].join("")
          };
        });
    </script>
  </body>
</html>
